<!DOCTYPE html>
<html>
<head>
    <title>订单信息</title>
    <#include "/header.html">
    <style>
        .layui-form-label {
            width: 110px;
        }
        .layui-rate {
            padding: 0;
        }
        .layui-rate .layui-inline {
            margin: inherit;
        }
        .layui-rate li i.layui-icon {
            font-size: 13px;
        }
        .album-img {
            cursor: pointer;
        }
    </style>
</head>
<body class="bg-white">

<div id="appMain">
</div>

<script type="text/html" id="mainBodyTpl">
    <div class="layui-fluid">
        <form class="layui-form layuimini-form" action="" lay-filter="dataForm">
            <div class="layui-row">
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-word-aux">订单编号：</label>
                            <div class="layui-form-mid text-lg text-blue">{{d.info.tradeNo}}</div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-word-aux">订单金额：</label>
                            <div class="layui-form-mid text-lg">{{d.info.sumPayFee}}</div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-word-aux">订单状态：</label>
                            <div class="layui-form-mid">
                                {{# if(d.status == 71){ }}
                                <span class="layui-badge layui-bg-grey">已取消</span>
                                {{# } else if(d.status == 60){ }}
                                <span class="layui-badge layui-bg-blue">已评价</span>
                                {{# } else if(d.status == 50){ }}
                                <span class="layui-badge layui-bg-blue">已送达</span>
                                {{# } else if(d.status == 30){ }}
                                <span class="layui-badge layui-bg-green">待送货</span>
                                {{# } else if(d.status == 20){ }}
                                <span class="layui-badge layui-bg-red">待付款</span>
                                {{# } else if(d.status == 10){ }}
                                <span class="layui-badge layui-bg-orange">备货中</span>
                                {{# } else { }}
                                <span class="layui-badge layui-bg-black">待接单</span>
                                {{# } }}
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-word-aux">下单用户：</label>
                            <div class="layui-form-mid">
                                <span>{{d.user.nickname}}</span>
                                <span class="margin-left-sm">{{d.user.mobile}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-word-aux">店铺名称：</label>
                            <div class="layui-form-mid">
                                {{# if(d.store.name != ''){ }}
                                <div style="float: left;">
                                    {{# if(d.store.avatar != ''){ }}
                                    <img src="{{d.store.avatar}}" width="40" alt="">
                                    {{# } else { }}
                                    <img src="${request.contextPath}/statics/images/avatar.png" width="40" alt="">
                                    {{# } }}
                                </div>
                                <div style="float: left;" class="margin-left-sm">
                                    <div>{{d.store.name}}</div>
                                    <div id="ratingView"></div>
                                </div>
                                {{# } }}
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-word-aux">店铺地址：</label>
                            <div class="layui-form-mid">{{d.store.address}}</div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-word-aux">收货地址：</label>
                            <div class="layui-form-mid">
                                <span>{{d.info.consignee}}</span>
                                <span class="margin-left">{{d.info.mobile}}</span>
                                <span class="margin-left">{{d.info.address}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md10">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-word-aux">需求描述：</label>
                        <div class="layui-form-mid">
                            {{# layui.each(d.items, function(n, item){ }}
                            <div {{n>0?' class="margin-top"':''}}>
                                {{# if(item.type == 0){ }}
                                <span class="voice-bg" data-ref="{{item.voice}}">
                                    <i class="layui-icon layui-icon-voice"></i>
                                    {{item.voiceSize}} ''
                                </span>
                                {{# } }}
                                <span class="margin-left-xs">{{item.demand}}</span>
                            </div>
                            {{# }); }}
                        </div>
                    </div>
                </div>
                <div class="layui-col-md10">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-word-aux">商品图片：</label>
                        <div class="layui-form-mid" id="layer-photos-view">
                            {{# layui.each(d.info.productImage, function(i, src){ }}
                            <img class="album-img" layer-pid="{{i}}" layer-src="{{src}}" src="{{src}}" width="60" alt="">
                            {{# }); }}
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-word-aux">付款方式：</label>
                    <div class="layui-form-mid">
                        {{# if(d.info.payType == 20){ }}
                        <span class="text-blue">支付宝支付</span>
                        {{# } else if(d.info.payType == 10){ }}
                        <span class="text-green">微信支付</span>
                        {{# } }}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-word-aux">下单时间：</label>
                    <div class="layui-form-mid">{{d.info.createTime}}</div>
                </div>
                {{# if(d.info.receiveTime != ''){ }}
                <div class="layui-form-item">
                    <label class="layui-form-label layui-word-aux">接单时间：</label>
                    <div class="layui-form-mid">{{d.info.receiveTime}}</div>
                </div>
                {{# } }}
                {{# if(d.info.payTime != ''){ }}
                <div class="layui-form-item">
                    <label class="layui-form-label layui-word-aux">付款时间：</label>
                    <div class="layui-form-mid">{{d.info.payTime}}</div>
                </div>
                {{# } }}
                {{# if(d.info.confirmTime != ''){ }}
                <div class="layui-form-item">
                    <label class="layui-form-label layui-word-aux">送达时间：</label>
                    <div class="layui-form-mid">{{d.info.confirmTime}}</div>
                </div>
                {{# } }}
                {{# if(d.info.closeTime != ''){ }}
                <div class="layui-form-item">
                    <label class="layui-form-label layui-word-aux">取消时间：</label>
                    <div class="layui-form-mid">{{d.info.closeTime}}</div>
                </div>
                {{# } }}
            </div>
            <div class="layui-form-item layui-hide">
                <div class="layui-input-block">
                    <button class="layui-btn" id="btnPass" lay-submit lay-filter="btnPass">通过认证</button>
                    <button class="layui-btn" id="btnRefuse" lay-submit lay-filter="btnRefuse">拒绝认证</button>
                    <button class="layui-btn" id="btnClose" lay-submit lay-filter="btnClose">关闭店铺</button>
                    <button class="layui-btn" id="btnActive" lay-submit lay-filter="btnActive">激活店铺</button>
                    <button class="layui-btn" id="btnCloseWin" lay-submit lay-filter="btnCloseWin">关闭窗口</button>
                </div>
            </div>
        </form>
    </div>
</script>

<script type="text/html" id="buttonsTpl">
    <button class="layui-btn layui-btn-primary" ref="#btnCloseWin">关闭窗口</button>
</script>

<script type="text/javascript">
    layui.use(['form', 'laytpl', 'rate'], function () {
        var form = layui.form,
            rate = layui.rate,
            laytpl = layui.laytpl,
            $ = layui.$;

        $(".layui-layer-btn0", parent.document).hide();
        $(".layui-layer-btn.layui-layer-btn-c button.layui-btn", parent.document).remove();

        var _parent = parent;
        if(_parent.formDataId > 0) {
            $.ajax({
                type: "POST",
                url: serverUrl('app/order/info/' + _parent.formDataId),
                success: function (result) {
                    if (result.code === 0) {
                        laytpl($("#mainBodyTpl").html()).render(result, function(html){
                            $("#appMain").html(html);
                        });
                        laytpl($("#buttonsTpl").html()).render(result.info, function(html){
                            $(".layui-layer-btn.layui-layer-btn-c", parent.document).prepend(html);
                            _parent.btnEvent();
                        });
                        rate.render({
                            elem: '#ratingView'
                            , length: 5
                            , value: result.store.rating
                            , half: true
                            , text: false
                            , readonly: true
                        });
                        layer.photos({
                            photos: '#layer-photos-view'
                            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                        });

                        $(".voice-bg").on('click', function(d) {
                            layer.open({
                                title: '播放语音'
                                ,content: '<audio controls="controls"><source src="'
                                        + d.currentTarget.dataset.ref
                                        + '" type="audio/mpeg"></audio>'
                            });
                        });
                    }
                }
            });
        }

        var changeStatus = function(title, status) {
            layer.confirm(title, {icon: 3, title:'提示'}, function(index){
                var params = {
                    id: _parent.formDataId,
                    status: status
                };
                submitFormData('app/order/update', params);
            });
        }

        form.on('submit(btnPass)', function (data) {
            changeStatus('确定通过认证吗？', 10);
            return false;
        });
        form.on('submit(btnRefuse)', function (data) {
            changeStatus('确定拒绝认证吗？', 20);
            return false;
        });
        form.on('submit(btnClose)', function (data) {
            changeStatus('确定关闭店铺吗？', 40);
            return false;
        });
        form.on('submit(btnActive)', function (data) {
            changeStatus('确定激活店铺吗？', 10);
            return false;
        });
        form.on('submit(btnCloseWin)', function (data) {
            var iframeIndex = _parent.layer.getFrameIndex(window.name);
            _parent.layer.close(iframeIndex);
        });

    });
</script>
</body>
</html>